<template>
  <div>
    <el-row class="search mt20">
      <el-form ref="search" :model="searchForm" inline size="small">
        <el-form-item label="订单号" prop="ordernumber">
          <el-input v-model="searchForm.ordernumber" placeholder="请输入订单号"/>
        </el-form-item>
        <el-form-item label="代理商" prop="agent_name">
          <el-select v-model="searchForm.agent_name" filterable placeholder="全部" clearable @focus="handelAgentName">
            <el-option v-for="(item,index) in agent_name" :label="item.agent_name" :value="item.agent_num" :key="index">{{ item.agent_name }}</el-option>
          </el-select>
          <span>-</span>
          <el-select v-model="searchForm.merchant_type">
            <el-option v-for="(item,index) in type" :label="item.name" :value="item.merchant_type" :key="index">{{ item.name }}</el-option>
          </el-select>
          <el-tooltip>
            <svg-icon icon-class="help" class="tip"/>
            <div slot="content">
              选择全部商户：<br>可以查询此代理商的全部商户<span class="err">（包括代理商下级代理的商户）</span><br> 选择直属代理商：<br>可以查询此代理商的自己的商户<span class="err">（不包括下级代理商的商户）</span>
            </div>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="商户名称" prop="name">
          <el-select v-model="searchForm.name" filterable placeholder="全部" clearable @focus.stop.prevent="handleShopName">
            <el-option v-for="(item,index) in shop_name" :value="item.mer_id" :label="item.name" :key="index">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店名称" prop="store_name">
          <el-select v-model="searchForm.store_name" filterable clearable placeholder="全部" @focus="handleStoreName">
            <el-option v-for="(item,index) in store_name" :key="index" :value="item.sto_id" :label="item.sto_name">{{ item.sto_name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付时间" prop="time">
          <el-date-picker v-model="searchForm.time" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="支付状态" prop="pay_status">
          <el-select v-model="searchForm.pay_status" clearable placeholder="全部">
            <el-option v-for="(item,index) in state" :key="index" :value="item.value" :label="item.name">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付通道" prop="channel">
          <el-select v-model="searchForm.channel" clearable placeholder="全部">
            <el-option v-for="(item,index) in channel" :value="item.value" :label="item.name" :key="index"> {{ item.name }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" prop="c_channel">
          <el-select v-model="searchForm.c_channel" clearable placeholder="全部">
            <el-option v-for="(item,index) in channels" :value="item.value" :label="item.name" :key="index"> {{ item.name }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款来源" prop="pay_resource">
          <el-select v-model="searchForm.pay_resource" clearable placeholder="全部">
            <el-option v-for="item in resource" :value="item.value" :label="item.name" :key="item.value"> {{ item.name }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额范围" prop="min">
          <el-input v-model="searchForm.min" class="w100" placeholder="最小值"/>
          <span>-</span>
          <el-input v-model="searchForm.max" class="w100" placeholder="最大值"/>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="success" size="small" class="btn30 btn-search" icon="el-icon-search" @click="handleSearch">查询</el-button> -->
          <el-button icon="el-icon-search" type="success" size="small" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-delete" type="info" size="small" @click="handleClickReset">清除</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="btn-group">
      <el-button size="small" type="primary" @click="nowDate">当日订单</el-button>
      <el-button size="small" type="primary" @click="yesterDay">昨日订单</el-button>
      <el-button size="small" type="primary" @click="ToMonth">当月订单</el-button>
      <el-button size="small" type="primary" @click="handleClickBlue">蓝海行动订单</el-button>
      <el-button size="small" type="primary" @click="handleClickGreen">绿洲计划订单</el-button>
      <el-button size="small" type="primary" @click="handleClickCharity">公益类订单</el-button>
      <el-button size="small" type="primary" @click="updateAll">批量更新状态</el-button>
      <el-button size="small" type="primary" @click="handleDownload">导出明细</el-button>
    </el-row>
    <el-row class="table-tip">
      <p><span>有效交易金额：<span class="tip">{{ effectiveAmount }}元</span></span><span>，有效交易笔数：<span class="succ">{{ effectivenumber }}笔</span></span></p>
    </el-row>
    <el-row>
      <el-table :data="order_data" :header-cell-style="{background:'#f2f2f2'}" size="small">
        <el-table-column label="订单号" prop="order_number" align="center"/>
        <el-table-column label="商户名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
            <svg-icon :icon-class="scope.row.special === 1 ? 'lh' : scope.row.special === 2 ? 'lv' : scope.row.special === 3 ? 'gy' : ''"/>
          </template>
        </el-table-column>
        <el-table-column label="门店名称" prop="store_name" align="center"/>
        <el-table-column label="有效交易金额" prop="deal_mount" align="center"/>
        <el-table-column label="支付方式" align="center">
          <template slot-scope="scope">
            <svg-icon :style="{fontSize: '22px'}" :icon-class="scope.row.pay_software === 1 ? 'wx' : scope.row.pay_software === 2 ? 'ali' : scope.row.pay_software === 3 ? 'jdmoney' : scope.row.pay_software === 4 ? 'qqmoney' : scope.row.pay_software === 0 ? 'payBank' : scope.row.pay_software === 5 ? 'quick' : scope.row.pay_software === 6 ? 'xj' : ''"/>
          </template>
        </el-table-column>
        <el-table-column label="付款状态" prop="pay_status" align="center"/>
        <el-table-column label="收款来源" prop="pay_resource" align="center"/>
        <el-table-column label="支付通道" prop="pay_channel" align="center"/>
        <el-table-column label="结算周期" prop="balance_type" align="center"/>
        <el-table-column label="支付时间" prop="created_at" align="center"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="show(scope.row.order_number)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="page.total"
        :page-size="page.pageSize"
        :current-page="page.current"
        layout="total, prev, pager, next, jumper"
        class="fr mt20"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <el-dialog :visible.sync="dialog" width="500px" title="订单详情">
      <p v-for="(item,index) in dialog_data" :key="index">{{ item.name }}：{{ item.value }}</p>
      <div slot="footer">
        <el-button type="primary" size="small" @click="update">更新状态</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listInit, listSearch, listBule, listGreen, listCharity, listBulePage, listGreenPage, listCharityPage, oderDownloadAll, listYesterDay, listToDay, listTodayPage, listToMonth, listThemonthPage, listbeforeorderPage, listPage, handleGetList, handelAgentName, handleShopName, handleStoreName } from '@/api/order'

export default {
  data() {
    return {
      tip: true,
      dialog: false,
      date: '',
      state: [],
      download: [],
      order_data: [],
      dialog_data: [],
      channel: [],
      channels: [],
      agent_name: [],
      resource: [],
      type: [
        { name: '全部商户', merchant_type: 2 },
        { name: '直属商户', merchant_type: 1 }
      ],
      shop_name: [],
      store_name: [],
      searchForm: {
        ordernumber: '',
        pay_resource: '',
        channel: '',
        c_channel: '',
        merchant_type: 2,
        name: '',
        store_name: '',
        pay_status: '',
        time: null,
        min: '',
        max: '',
        agent_name: ''
      },
      page: {
        total: 0,
        pageSize: 1,
        current: 1
      },
      ordernumber: '',
      effectiveAmount: '',
      effectivenumber: '',
      typs: 0
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.handleDocumentInit()
  },
  methods: {
    handleDocumentInit() {
      listInit(this.id, 1).then(response => {
        this.order_data = response.data.result.data
        this.page.total = response.data.result.total
        this.channel = response.data.result.channel
        this.channels = response.data.result.c_channel
        this.resource = response.data.result.pay_resource
        this.state = response.data.result.pay_type
        this.download = response.data.result.alldata
        this.effectiveAmount = response.data.result.effectiveAmount
        this.effectivenumber = response.data.result.effectivenumber
        this.page.pageSize = response.data.result.page_size
      })
    },
    handleClickReset() {
      this.$refs['search'].resetFields()
      this.searchForm.max = null
      this.handleDocumentInit()
    },
    show(id) {
      this.ordernumber = id
      handleGetList(id).then(response => {
        this.dialog_data = response.data.result
        this.dialog = true
      })
    },
    update() {
      handleGetList(this.ordernumber).then(response => {
        this.dialog_data = response.data.result
      })
    },
    handleDownload() {
      this.$prompt('请选择日期', '导出明细', {
        confirmButtonText: '确定',
        showCancelButton: false,
        inputType: 'date'
      }).then(({ value }) => {
        oderDownloadAll(value, this.searchForm).then(res => {
          if (res.data.errorCode === 0) {
            require.ensure([], () => {
              const { export_json_to_excel } = require('@/vendor/Export2Excel')
              const tHeader = ['订单号', '门店名称', '实收金额', '交易金额', '退款金额', '付款状态', '支付通道', '支付方式', '支付时间', '手续费比例', '手续费'] // excel 表格头
              const filterVal = ['order_number', 'store_name', 'arrive_mount', 'deal_mount', 'refund_amount', 'pay_status', 'pay_channel', 'pay_software', 'pay_at', 'rate', 'commission_charge'] // excel key值
              const list = res.data.result
              const data = this.formatJson(filterVal, list) // 自行洗数据 按序排序的一个array数组
              export_json_to_excel(tHeader, data, '订单数据')
            })
          } else {
            this.$message.error(res.data.errorMsg)
          }
        })
      }).catch(() => {
        return
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    nowDate() {
      // 查询当日
      this.typs = 1
      listToDay(this.id, this.searchForm).then(response => {
        // 当日返回操作
        this.order_data = response.data.result.data
        this.page.total = response.data.result.total
        this.effectiveAmount = response.data.result.effectiveAmount
        this.effectivenumber = response.data.result.effectivenumber
        this.download = response.data.result.alldata
        this.page.pageSize = response.data.result.page_size
        this.page.current = response.data.result.page
      })
    },
    yesterDay() {
      // 查询昨日
      this.typs = 2
      listYesterDay(this.id, this.searchForm).then(response => {
        // 昨日返回操作
        this.order_data = response.data.result.data
        this.page.total = response.data.result.total
        this.download = response.data.result.alldata
        this.effectiveAmount = response.data.result.effectiveAmount
        this.effectivenumber = response.data.result.effectivenumber
        this.page.pageSize = response.data.result.page_size
        this.page.current = response.data.result.page
      })
    },
    ToMonth() {
      // 查询当月
      this.typs = 3
      listToMonth(this.id, this.searchForm).then(response => {
        // 当月返回操作
        this.order_data = response.data.result.data
        this.download = response.data.result.alldata
        this.page.total = response.data.result.total
        this.effectiveAmount = response.data.result.effectiveAmount
        this.effectivenumber = response.data.result.effectivenumber
        this.page.pageSize = response.data.result.page_size
        this.page.current = response.data.result.page
      })
    },
    handleSearch() {
      this.typs = 0
      listSearch(this.id, this.searchForm).then(response => {
        this.order_data = response.data.result.data
        this.page.total = response.data.result.total
        this.download = response.data.result.alldata
        this.effectiveAmount = response.data.result.effectiveAmount
        this.effectivenumber = response.data.result.effectivenumber
        this.page.pageSize = response.data.result.page_size
        this.page.current = response.data.result.page
      })
    },
    handleCurrentChange(v) {
      if (this.typs === 0) {
        listPage(this.id, this.searchForm, v).then(response => {
          this.order_data = response.data.result.data
          this.page.total = response.data.result.total
          this.page.pageSize = response.data.result.page_size
          this.page.current = response.data.result.page
        })
      } else if (this.typs === 1) {
        listTodayPage(this.id, this.searchForm, v).then(response => {
          this.order_data = response.data.result.data
          this.page.total = response.data.result.total
          this.page.pageSize = response.data.result.page_size
          this.page.current = response.data.result.page
        })
      } else if (this.typs === 2) {
        listbeforeorderPage(this.id, this.searchForm, v).then(response => {
          this.order_data = response.data.result.data
          this.page.total = response.data.result.total
          this.page.pageSize = response.data.result.page_size
          this.page.current = response.data.result.page
        })
      } else if (this.typs === 3) {
        listThemonthPage(this.id, this.searchForm, v).then(response => {
          this.order_data = response.data.result.data
          this.page.total = response.data.result.total
          this.page.pageSize = response.data.result.page_size
          this.page.current = response.data.result.page
        })
      } else if (this.typs === 4) {
        listBulePage(this.id, this.searchForm, v).then(response => {
          if (response.data.errorCode === 0) {
            this.order_data = response.data.result.data
            this.page.total = response.data.result.total
            this.page.pageSize = response.data.result.page_size
            this.page.current = response.data.result.page
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      } else if (this.typs === 5) {
        listGreenPage(this.id, this.searchForm, v).then(response => {
          if (response.data.errorCode === 0) {
            this.order_data = response.data.result.data
            this.page.total = response.data.result.total
            this.page.pageSize = response.data.result.page_size
            this.page.current = response.data.result.page
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      } else if (this.typs === 6) {
        listCharityPage(this.id, this.searchForm, v).then(response => {
          if (response.data.errorCode === 0) {
            this.order_data = response.data.result.data
            this.page.total = response.data.result.total
            this.page.pageSize = response.data.result.page_size
            this.page.current = response.data.result.page
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    },
    handelAgentName() {
      handelAgentName(this.id).then(response => {
        this.agent_name = response.data.result
      })
    },
    handleShopName() {
      let id, type
      if (this.searchForm.agent_name === '' || this.searchForm.agent_name === undefined || this.searchForm.agent_name === null) {
        id = this.id
        type = 1
      } else {
        type = 2
        id = this.searchForm.agent_name
      }
      handleShopName(id, this.searchForm.merchant_type, type).then(response => {
        this.shop_name = response.data.result
      })
    },
    handleStoreName() {
      handleStoreName(this.searchForm.name).then(response => {
        this.store_name = response.data.result
      })
    },
    updateAll() {
      listInit(this.id, 1).then(response => {
        this.order_data = response.data.result.data
        this.page.total = response.data.result.total
        this.resource = response.data.result.pay_resource
        this.channel = response.data.result.channel
        this.state = response.data.result.pay_type
        this.download = response.data.result.alldata
        this.page.pageSize = response.data.result.page_size
      })
    },
    handleClickBlue() {
      this.typs = 4
      listBule(this.id, this.searchForm).then(response => {
        if (response.data.errorCode === 0) {
          this.order_data = response.data.result.data
          this.download = response.data.result.alldata
          this.page.total = response.data.result.total
          this.effectiveAmount = response.data.result.effectiveAmount
          this.effectivenumber = response.data.result.effectivenumber
          this.page.pageSize = response.data.result.page_size
          this.page.current = response.data.result.page
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickGreen() {
      this.typs = 5
      listGreen(this.id, this.searchForm).then(response => {
        if (response.data.errorCode === 0) {
          this.order_data = response.data.result.data
          this.download = response.data.result.alldata
          this.page.total = response.data.result.total
          this.effectiveAmount = response.data.result.effectiveAmount
          this.effectivenumber = response.data.result.effectivenumber
          this.page.pageSize = response.data.result.page_size
          this.page.current = response.data.result.page
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickCharity() {
      this.typs = 6
      listCharity(this.id, this.searchForm).then(response => {
        if (response.data.errorCode === 0) {
          this.order_data = response.data.result.data
          this.download = response.data.result.alldata
          this.page.total = response.data.result.total
          this.effectiveAmount = response.data.result.effectiveAmount
          this.effectivenumber = response.data.result.effectivenumber
          this.page.pageSize = response.data.result.page_size
          this.page.current = response.data.result.page
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn-group{
    .el-button{
      margin-top: 10px;
    }
  }
  .table-tip{
    font-size: 12px;
    .el-button{
      padding: 5px 15px;
      color: #15a94d;
      border: 1px solid #15a94d;
      border-radius: unset;
      margin-right: 10px;
    }
  }
  .el-dialog{
    ul{
      font-size: 12px;
      margin: 0;
      padding: 0 20px;
      li{
        display: inline-flex;
        align-items: center;
        // justify-content: center;
        width: 45%;
      }
    }
  }
</style>
